<template>
    <Select
        style="min-width:150px;max-width: 500px"
        v-model="model14"
        :multiple="isInOpt"
        :label-in-value="true"
        :placeholder="placeholder"
        :max-tag-count="maxTagCount"
        @on-change="onselectChange"
    >
        <Input search enter-button placeholder="搜索" @on-search="search" />
        <Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>
        <Option v-for="(option2, index2) in options2" :value="option2.value" :key="index2" style="display:none;" >{{option2.label}}</Option>
        <Page v-show="options1.length>0" :page-size="pageData.pageSize" :total="pageData.total"  @on-change="changeBasePage"  style="text-align: center;" simple />
    </Select>
</template>
<script>

    import {
        getBrandListByRule,
        getModelListByRule,
        getStyleListByRule,
        getCarDealList,
        getAllCarDealers,
        getAllChannelBaseInfo,
    } from "@/projects/afs-core-business/api/afs-product/product-rule/product-rule-atom";

    import {
        getselectProductData,
    } from "@/projects/afs-core-business/api/afs-product/product/extrasProgramConfig";

    export default {
        props:{
            //组件配置参数
            params:{
                type:String,
                require:true
            },
            values:{
                type:Array,
                require:true
            },
            valueNames:{
                type:Array,
                require:true
            },
            //是否为in操作符
            isInOpt:{
                type:Boolean,
                default:false
            },
            //输入框提醒值
            placeholder:{
                type:String,
                default: ''
            }
        },
        data () {
            return {
                model14: [],
                loading2: false,
                options1:[],
                options2: [],
                //分页
                pageData: {
                    pageNumber: 1,
                    pageSize: 5,
                    total: 0,
                    searchName:null,
                },
                maxTagCount:3,
            }
        },
        methods: {
            onselectChange (object) {
                // 值和名称在非in操作符时只取第一个元素，in时取所有元素
                // 规则值
                let values=['1','2','3']
                //表达式中文名
                let valuesName=['呵呵1','呵呵2','呵呵3']
                //选中值
                if(this.isInOpt){
                    if(object&&object.length>0){
                        values.splice(0,values.length)
                        values.push(...this.model14);
                        valuesName.splice(0,valuesName.length)
                        object.forEach(sel=>{
                            valuesName.push(sel.label);
                        })
                    }else {
                        valuesName.splice(0,valuesName.length)
                        values.splice(0,values.length)
                    }

                    //输入值是否合法 true合法，false不合法
                    let validate=values.length>0;
                    // 值不合法提示信息
                    let message=(values.length>0)?'':'必须选择';
                    //触发父组件写值及校验
                    this.$emit("valueChange",values,valuesName,validate,message)
                }else{
                    if(object){
                        values.splice(0,values.length)
                        values.push(this.model14);
                        valuesName.splice(0,valuesName.length)
                        valuesName.push(object.label);
                        //输入值是否合法 true合法，false不合法
                        let validate=values.length>0;
                        // 值不合法提示信息
                        let message=(values.length>0)?'':'必须选择';
                        //触发父组件写值及校验
                        this.$emit("valueChange",values,valuesName,validate,message)
                    }else{
                        values.splice(0,values.length)
                        valuesName.splice(0,valuesName.length)
                        //输入值是否合法 true合法，false不合法
                        let validate=false;
                        // 值不合法提示信息
                        let message='必须选择';
                        //触发父组件写值及校验
                        this.$emit("valueChange",values,valuesName,validate,message)
                    }
                };

                //数据处理
                let arr = [];
                if(object&&object.length>0){
                    object.forEach(sel=>{
                        // console.info(JSON.stringify(sel))
                        arr.push(sel);
                    })
                }
                if(this.isInOpt){
                    this.options2 = arr;
                }else{
                    let param = JSON.parse((JSON.stringify(this.options2) + JSON.stringify(arr)).replace(/}{/, ','));
                    this.options2 = param;
                }
            },
            //页码变化
            changeBasePage(value){
                this.pageData.pageNumber = value;
                this.query();
            },
            //条件搜索
            search(v) {
                this.pageData.searchName = v;
                this.pageData.pageNumber = 1;
                this.query();
            },
            //初始查询
            query(){
                let param = JSON.parse((JSON.stringify(this.pageData) + JSON.stringify(JSON.parse(this.params))).replace(/}{/, ','));
                console.info("查询参数"+JSON.stringify(param))
                if(JSON.parse(this.params).select==='style'){
                    getStyleListByRule(param).then(res => {
                        if (res.code === "0000") {
                            this.options1 = res.data.records;
                            this.pageData.total = res.data.total;
                        }
                    });
                    this.maxTagCount = 1;
                }else if(JSON.parse(this.params).select==='model'){
                    getModelListByRule(param).then(res => {
                        if (res.code === "0000") {
                            this.options1 = res.data.records;
                            this.pageData.total = res.data.total;
                        }
                    });
                }else if(JSON.parse(this.params).select==='brand'){
                    getBrandListByRule(param).then(res => {
                        if (res.code === "0000") {
                            this.options1 = res.data.records;
                            this.pageData.total = res.data.total;
                        }
                    });
                }else if(JSON.parse(this.params).select==='carDealer'){
                    getAllCarDealers(param).then(res => {
                        if (res.code === "0000") {
                            this.options1 = res.data.records;
                            this.pageData.total = res.data.total;
                        }
                    });
                }else if(JSON.parse(this.params).select==='partners'){
                    getAllChannelBaseInfo(param).then(res => {
                        if (res.code === "0000") {
                            this.options1 = res.data.records;
                            this.pageData.total = res.data.total;
                        }
                    });
                }
            },
        },
        created(){
            //查询
            this.query();
            //父页面数据初始化
            this.model14.push(...this.values);
            let arr = [];
            if(this.values&&this.values.length>0){
                for(var i=0;i<this.values.length;i++){
                    var map = {};
                    map["value"] = this.values[i]
                    map["label"] = this.valueNames[i]
                    arr.push(map);
                }
            }
            this.options2 = arr;
        }
    }
</script>
